import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Test1 from './pages/Test1'
import Test2 from './pages/Test2'

export default function App() {
  return (
    <div>
      <Link to="/home">首页</Link>
      &nbsp;&nbsp;
      <Link to="/login">登录页</Link>
      <hr />
      {/* 定义前端路由规则 */}
      <Routes>
        <Route path="home" element={<Home></Home>}>
          <Route path="test1" element={<Test1></Test1>}></Route>
          <Route path="test2" element={<Test2></Test2>}></Route>
        </Route>
        {/* Login组件要接收路由参数,所以在Login的路由规则位置定义路由参数 */}
        {/* 注意: 如果定义了路由参数,默认路由参数是必填的.否则无法正确展示路由组件 */}
        {/* <Route path="login/:xxx" element={<Login></Login>}></Route> */}

        {/* 在路由参数后面加?则表示这个参数是可选的 */}
        {/* <Route path="login/:xxx?" element={<Login></Login>}></Route> */}

        {/* <Route path="login">
          <Route path=":xxx" element={<Login></Login>}></Route>
          <Route path="" element={<Login></Login>}></Route>
        </Route> */}
        {/* 上面的代码其实就是表示下面代码的意思 */}
        {/* <Route path="/login/:xxx" element={<Login></Login>}></Route>
        <Route path="/login" element={<Login></Login>}></Route> */}

        {/* 也可以写多个路由参数 */}
        <Route path="login/:xxx/:yyy?" element={<Login></Login>}></Route>
      </Routes>
    </div>
  )
}
